<template>
    <basic-container>
        <avue-crud :option="option"
                   :data="data"
                   ref="crud"
                   v-model="form"
                   :table-loading="loading"
                   :permission="permissionList"
                   :page="page"
                   @refresh-change="refreshChange"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @on-load="onLoad">
            <template slot-scope="scope" slot="menu">
                <el-button v-if="!scope.row.isSetSupplierUser" icon="el-icon-s-tools" type="text" size="small"
                           @click="setSupplierUser(scope.row)">
                    设置管理员
                </el-button>
                <el-button v-if="scope.row.isSetSupplierUser" icon="el-icon-s-tools" type="text" size="small"
                           @click="editSupplierUser(scope.row)">
                    查看管理员
                </el-button>
                <el-button icon="el-icon-edit" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                <el-button icon="el-icon-delete" type="text" size="small" @click="rowDel(scope.row.id)">删除</el-button>
            </template>

            <template slot-scope="scope" slot="menuLeft">
                <el-button type="primary"
                           size="small"
                           @click="addGoods"
                >新增
                </el-button>
            </template>
        </avue-crud>
        <!-- 编辑弹框 -->
        <el-dialog
                title="编辑供货商"
                :visible.sync="editDialogVisible"
                width="50%"
                @click="close"
                :close-on-click-modal="false"
                :show-close="false"
        >
            <el-form :model="editForm" :rules="editFormrules" ref="editRefForm" label-width="100px">
                <el-form-item label="供货商编码" prop="supplierCode">
                    <el-input v-model="editForm.supplierCode"></el-input>
                </el-form-item>
                <el-form-item label="供货商名称" prop="title">
                    <el-input v-model="editForm.title"></el-input>
                </el-form-item>
                <el-form-item label="供货商手机" prop="mobile">
                    <el-input v-model="editForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" :loading="loadEditBtn" @click="editInfoBtn('editRefForm')">确 定</el-button>
    <el-button @click="editDialogVisibleClose">取 消</el-button>
  </span>
        </el-dialog>

        <!-- 新增弹框 -->
        <el-dialog
                title="新增供货商"
                :visible.sync="dialogVisible"
                width="50%"
                @click="close"
                :close-on-click-modal="false"
                :show-close="false"
        >
            <el-form :model="addForm" :rules="addFormrules" ref="addFormRef" label-width="100px">
                <el-form-item label="供货商编码" prop="supplierCode">
                    <el-input v-model="addForm.supplierCode"></el-input>
                </el-form-item>
                <el-form-item label="供货商名称" prop="title">
                    <el-input v-model="addForm.title"></el-input>
                </el-form-item>
                <el-form-item label="供货商手机" prop="mobile">
                    <el-input v-model="addForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" :loading="loadAddBtn" @click="addFormdialogVisible('addFormRef')">确 定</el-button>
    <el-button @click="colsedialogVisible">取 消</el-button>
  </span>
        </el-dialog>

        <!--实际上是添加供货商角色下的用户，然后同步到其他项目的表user里面去 -->
        <el-dialog
                title="设置管理员"
                :visible.sync="setDialogVisible"
                width="50%"
                @click="close"
                :close-on-click-modal="false"
                :show-close="false"
        >
            <el-form :model="setForm" :rules="setFormrules" ref="setFormRef" label-width="100px">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="setForm.account"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="setForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <div class="sub-title">需满足6-20位数字,字母。可以是组合(不包含特殊符号)</div>
                    <el-input v-model="setForm.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="name">
                    <el-input v-model="setForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" :loading="loadSetBtn" @click="setFormDialogVisible('setFormRef')">确 定</el-button>
    <el-button @click="setColseDialogVisible">取 消</el-button>
  </span>
        </el-dialog>

        <el-dialog
                title="查看管理员"
                :visible.sync="editAdminDialogVisible"
                width="50%"
                @click="close"
                :close-on-click-modal="false"
                :show-close="false"
        >
            <el-form :model="editSetForm" :rules="setFormrules" ref="setFormRef" label-width="100px">
                <el-form-item label="账号" prop="account">
                    <el-input disabled v-model="editSetForm.account"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input disabled v-model="editSetForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="name">
                    <el-input disabled v-model="editSetForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
<!--    <el-button type="primary" :loading="loadSetBtn" @click="editSetFormDialogVisible('setFormRef')">确 定</el-button>-->
    <el-button @click="setColseDialogVisible">取 消</el-button>
  </span>
        </el-dialog>

    </basic-container>
</template>

<script>
    import {
        getList,
        remove,
        saveItem,
        setSupplierUser,
        editItem,
        detail
    } from "@/api/base/store/seller/supplier";
    import {mapGetters} from "vuex";
    import {
        testPhone, testPassWord,testAccount,testAccountName
    } from '@/util/util';

    export default {
        data() {
            return {
                // 验证手机号规则
                // checkMoblie (rule, value, cb) => {
                //     const regMoblie = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
                //     if(regMoblie.test(value)){
                //       return cb()
                //     }
                //     cb(new Error('请输入合法手机号'))
                // },
                editSetForm:{},
                addForm: {
                    supplierCode: '',
                    title: '',
                    mobile: ''
                },
                addFormrules: {
                    supplierCode: [
                        {required: true, message: '请输入供货商编码', trigger: 'blur'},
                        {validator: testAccount,trigger: 'blur'}
                    ],
                    title: [
                        {required: true, message: '请输入供货商名称', trigger: 'blur'},
                        {validator: testAccountName,trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {validator: testPhone, trigger: 'blur'}

                    ]
                },
                setForm: {
                    account: '',
                    phone: '',
                    password: '',
                    name: '',
                    supplierId: ''
                },
                setFormrules: {
                    account: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {validator: testPhone, trigger: 'blur'}

                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {validator: testPassWord, trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                    ],
                },
                editForm: {
                    supplierCode: '',
                    title: '',
                    mobile: ''
                },
                editFormrules: {
                    supplierCode: [
                        {required: true, message: '请输入供货商编码', trigger: 'blur'},
                        {validator: testAccount,trigger: 'blur'}
                    ],
                    title: [
                        {required: true, message: '请输入供货商名称', trigger: 'blur'},
                        {validator: testAccountName,trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {validator: testPhone, trigger: 'blur'}

                    ]
                },
                form: {},
                query: {},
                loading: true,
                loadAddBtn: false,
                loadEditBtn: false,
                loadSetBtn: false,
                editDialogVisible: false,
                editAdminDialogVisible:false,
                dialogVisible: false,
                setDialogVisible: false,
                rolesTree: [],
                rolesKeys: [],
                box: false,
                "delBtn": true,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                option: {
                    size: 'mini',
                    excelBtn: false,
                    tip: false,
                    border: true,
                    index: false,
                    selection: false,
                    columnBtn: false,
                    refreshBtn: false,
                    addBtn: false,
                    viewBtn: false,
                    editBtn: false,
                    delBtn: false,
                    rowKey: 'id',
                    height: 'auto',
                    // calcHeight: 380,
                    dialogType: 'dialog',
					align:'center',
					searchMenuSpan:6,
                    column: [
                        {
                            label: " 供货商名称",
                            prop: "title",
                            fixed: true,
                            search: true,
                            labelWidth:30,
                            searchLabelWidth:90,
                            rules: [{
                                required: true,
                                message: "请输入 供货商名称",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "供货商编码",
                            prop: "supplierCode",
							width:200,
                            rules: [{
                                required: true,
                                message: "请输入供货商编码",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "时间",
                            prop: "addTime",
							width:200,
                            rules: [{
                                required: true,
                                message: "请输入创建时间",
                                trigger: "blur"
                            }]
                        },

                        {
                            label: "手机号",
                            prop: "mobile",
							width:200,
                            search: true,
                        },
                        {
                            label: "删除标识  0否  1是",
                            prop: "deleteStatus",
                            hide: true,
                            rules: [{
                                required: true,
                                message: "请输入删除标识  0否  1是",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "店铺id",
                            prop: "storeId",
                            hide: true,
                            rules: [{
                                required: true,
                                message: "请输入店铺id",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "供货商状态",
                            prop: "status",
                            hide: true,
                            rules: [{
                                required: true,
                                message: "请输入供货商状态",
                                trigger: "blur"
                            }]
                        },

                    ]
                },
                data: []
            };
        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList() {
                return {

                };
            },
        },
        methods: {
            addGoods() {
                this.dialogVisible = true;
            },
            colsedialogVisible() {
                this.$refs.addFormRef.resetFields()
                this.dialogVisible = false
            },
            editDialogVisibleClose() {
                this.$refs.editRefForm.resetFields();
                this.editDialogVisible = false;
                this.onLoad(this.page);
            },
            addFormdialogVisible(addFormRef) {
                this.$refs[addFormRef].validate((valid) => {
                    if (valid) {
                        this.loadAddBtn = true;
                        saveItem(this.addForm).then(res => {
                            if (res.data.code == 200) {
                                this.dialogVisible = false
                                this.$message({
                                    type: "success",
                                    message: "操作成功!"
                                });
                                this.loadAddBtn = false;
                                this.dialogVisible = false
                                this.onLoad(this.page);
                                this.$nextTick(()=>{
                                    this.$refs[addFormRef].resetFields();
                                })
                            } else {
                                this.loadAddBtn = false;
                                this.$message({
                                    type: "error",
                                    message: res.data.message
                                });
                                this.onLoad(this.page);
                            }
                        })
                    } else {
                        this.loadAddBtn = false;
                    }
                });
            },
            //打开设置管理员弹框(实际上是创建供货商角色下的用户，然后同步到其他数据库的user表中，就是新增用户)
            setSupplierUser(row) {
                console.log(row)
                this.setDialogVisible = true;
                this.setForm.supplierId = row.id;
                this.setForm.phone = row.mobile;
            },
            // 编辑管理员信息
            editSupplierUser(row) {
                console.log('row',row)
                detail({supplierId:row.id}).then(res=>{
                    if(res.data.code==200) {
                        this.editSetForm = res.data.data
                         this.editAdminDialogVisible = true;
                    }else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        });
                    }
                })
            },
            //设置管理员之后点击确定
            setFormDialogVisible(setFormRef) {
                this.$refs[setFormRef].validate((valid) => {
                    if (valid) {
                        this.loadSetBtn = true;
                        console.log(this.setForm);
                        if (this.setForm.account && this.setForm.password && this.setForm.phone) {

                            //校验账号的长度
                            if(this.setForm.account.length>11){
                                this.loadSetBtn = false;
                                this.$message({
                                    type: "error",
                                    message: "所输入的账号的字符长度不能超过11位"
                                });
                                return;
                            }

                            //校验昵称的长度
                            if(this.setForm.name.length>11){
                                this.loadSetBtn = false;
                                this.$message({
                                    type: "error",
                                    message: "所输入的昵称的字符长度不能超过11位"
                                });
                                return;
                            }

                            //先校验所输入的账号是否已经已经在表里面存在过了
                            setSupplierUser(this.setForm).then(res => {
                                if (res.data.code == 200) {
                                    this.dialogTableVisible = false
                                    this.$message({
                                        type: 'success',
                                        message: '操作成功!'
                                    })
                                    this.loadSetBtn = false;
                                    this.setDialogVisible = false;
                                    this.$refs["setFormRef"].resetFields();
                                    this.onLoad(this.page);
                                } else {
                                    this.loadSetBtn = false;
                                    this.$message({
                                        type: "error",
                                        message: res.data.message
                                    });
                                }
                            });
                        } else {
                            this.loadSetBtn = false;
                            this.$message({
                                type: "error",
                                message: "账号或者密码或者手机号不能为空"
                            });
                        }
                    }
                    else {
                        this.loadSetBtn = false;
                    }
                });
            },
            //关闭设置管理员弹框
            setColseDialogVisible() {
                this.$refs.setFormRef.resetFields()
                this.setDialogVisible = false
                this.editAdminDialogVisible = false
            },
            editSetFormDialogVisible() {
                this.$refs['setFormRef'].validate((valid) => {
                    if (valid) {
                        this.loadSetBtn = true;
                        if (this.editSetForm.account && this.editSetForm.phone) {

                            //校验账号的长度
                            if(this.editSetForm.account.length>11){
                                this.loadSetBtn = false;
                                this.$message({
                                    type: "error",
                                    message: "所输入的账号的字符长度不能超过11位"
                                });
                                return;
                            }

                            //校验昵称的长度
                            if(this.editSetForm.name.length>11){
                                this.loadSetBtn = false;
                                this.$message({
                                    type: "error",
                                    message: "所输入的昵称的字符长度不能超过11位"
                                });
                                return;
                            }

                            //先校验所输入的账号是否已经在表里面存在过了
                            editItem(this.editSetForm).then(res => {
                                if (res.data.code == 200) {
                                    this.dialogTableVisible = false
                                    this.$message({
                                        type: 'success',
                                        message: '操作成功!'
                                    })
                                    this.loadSetBtn = false;
                                    this.editAdminDialogVisible = false;
                                    this.$refs["setFormRef"].resetFields();
                                    this.onLoad(this.page);
                                } else {
                                    this.loadSetBtn = false;
                                    this.$message({
                                        type: "error",
                                        message: res.data.message
                                    });
                                }
                            });
                        } else {
                            this.loadSetBtn = false;
                            this.$message({
                                type: "error",
                                message: "账号或者手机号不能为空"
                            });
                        }
                    }
                    else {
                        this.loadSetBtn = false;
                    }
                });
            },
            editInfoBtn(editRefForm) {
                this.$refs[editRefForm].validate((valid) => {
                    if (valid) {
                        this.loadEditBtn = true;
                        saveItem(this.editForm).then(res => {
                            if (res.data.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!"
                                });
								setTimeout(() => {
									this.loadEditBtn = false;
								}, 1000)
                                this.editDialogVisible = false
                                this.onLoad(this.page);
                            } else {
                                this.loadEditBtn = false;
                                this.$message({
                                    type: "error",
                                    message: res.data.message
                                });
                                this.onLoad(this.page);
                            }
                        })
                    } else {
                        this.loadEditBtn = false;
                    }
                });
            },
            edit(row) {
                console.log('row',row)
                this.title = '编辑品牌'
                this.editForm = row
                this.editDialogVisible = true;
            },
            rowDel(id) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(id);
                    })
                    .then((data) => {
                        if(data.data.code==200){
                            if (this.data.length == 1) {
                                this.page.currentPage -= 1
                            }
                            this.onLoad(this.page)
                            this.$message({
                                type: "success",
                                message: "操作成功!"
                            });
                        }else{
                            this.$message({
                                type: "error",
                                message: data.data.message
                            });
                        }
                    });
            },

            // 新增关闭按钮
            close() {
                this.dialogVisible = false;
                this.$refs.formRef.resetFields();
            },

            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params,done) {
                this.query = params;
                this.page.currentPage=1
                this.onLoad(this.page, params,done);
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page);
            },
            onLoad(page, params = {},done) {
                this.loading = true;
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    if(done){
                        done();
                    }
                    this.loading = false;
                    const data = res.data;
                    this.page.total = data.count;
                    this.data = data.data;
                });
            }
        }
    };
</script>

<style>
    .avue-crud__menu {
        min-height: 0px !important;
        margin-bottom: 0px !important;
    }
</style>
